Words

==All right, so maybe FILES was a bit complicated. WORDS are a whole lot easier, especially now that you get the idea of GUNK. == To put words in a web page, all you need are the words themselves and some gunk to tell the browser how to display the words. In your word processor, I'm sure you've used formatting such as: > headings bold text center text paragraph breaks You can do all of this formatting in a web page also; you just have to put in the gunk to tell the browser what to do. Headings are easy. You just put some gunk right before and right after the words you want shown as headings in bigger text. Here's what the gunk looks like: ** Your Heading ** ** ** || Putting the H1 thing before and after words in your HTML file will display the words like this: > =Your Heading = The H2 thing is a little smaller; it looks like this: > ==Your Heading == H3 looks like this: > ===<span style="font-family: 'Comic Sans MS',cursive;">Your Heading === <span style="color: #000066; font-family: 'Comic Sans MS',cursive; font-size: 160%;">Bolding text is a piece of cake: <span style="font-family: 'Comic Sans MS',cursive;">**<span style="font-family: Geneva,Arial;"> Hello! ** <span style="font-family: 'Comic Sans MS',cursive;">**<span style="color: #0000ff; font-family: Geneva,Arial;"></B> ** ||
 * <span style="color: #000066; font-family: Geneva,Arial; font-size: 150%;">1Headings ||
 * <span style="font-family: 'Comic Sans MS',cursive; font-size: 150%;">**<span style="color: #0000ff; font-family: Geneva,Arial;"> **
 * <span style="color: #000066; font-family: Geneva,Arial;">2Bold ||
 * <span style="font-family: 'Comic Sans MS',cursive;">**<span style="color: #0000ff; font-family: Geneva,Arial;"><B> **

<span style="color: #000066; font-family: 'Comic Sans MS',cursive; font-size: 160%;">Can you guess how to center something? Yup, put a centering bit of gunk before and after the words you want to center: <span style="font-family: 'Comic Sans MS',cursive;">**<span style="font-family: Geneva,Arial;"> Welcome! ** <span style="font-family: 'Comic Sans MS',cursive;">**<span style="color: #0000ff; font-family: Geneva,Arial;"></CENTER> ** || <span style="color: #000066; font-family: 'Comic Sans MS',cursive; font-size: 160%;">Can you center a heading? Yup; just use both bits of gunk. <span style="font-family: 'Comic Sans MS',cursive;">**<span style="font-family: Geneva,Arial;"> Welcome! ** <span style="font-family: 'Comic Sans MS',cursive;">**<span style="color: #0000ff; font-family: Geneva,Arial;"></H1></CENTER> ** ||
 * <span style="color: #000066; font-family: Geneva,Arial;">3Center ||
 * <span style="font-family: 'Comic Sans MS',cursive;">**<span style="color: #0000ff; font-family: Geneva,Arial;"><CENTER> **
 * <span style="font-family: 'Comic Sans MS',cursive;">**<span style="color: #0000ff; font-family: Geneva,Arial;"><CENTER> **

<span style="color: #000066; font-family: 'Comic Sans MS',cursive; font-size: 160%;">And making a paragraph break is even easier: <span style="color: #000066; font-family: 'Comic Sans MS',cursive; font-size: 160%;">It's one of the few bits of gunk that doesn't require a closing </P> even though you can use one if you want.
 * <span style="color: #000066; font-family: Geneva,Arial;">4Paragraph Break ||
 * <span style="font-family: 'Comic Sans MS',cursive;">**<span style="color: #0000ff; font-family: Geneva,Arial;"><P> ** ||

Let's see what we can do with all this gunk. Here's our file and here's what it looks like in a browser:
See? That was easy. Try it!
 * **<span style="color: #0000ff; font-family: Geneva,Arial;"><HTML> **
 * <span style="color: #0000ff; font-family: Geneva,Arial;"><HEAD> </HEAD> **
 * <span style="color: #0000ff; font-family: Geneva,Arial;"><BODY> **
 * <span style="color: #0000ff; font-family: Geneva,Arial;"><CENTER> **
 * <span style="font-family: Geneva,Arial;">Welcome! **
 * <span style="color: #0000ff; font-family: Geneva,Arial;"></H1></CENTER> <span style="font-family: Geneva,Arial;">I am an HTML Author. **
 * <span style="color: #0000ff; font-family: Geneva,Arial;"><P> **
 * <span style="color: #0000ff; font-family: Geneva,Arial;"><B> <span style="font-family: Geneva,Arial;">You <span style="color: #0000ff; font-family: Geneva,Arial;"></B> <span style="font-family: Geneva,Arial;"> can be one too! **
 * <span style="color: #0000ff; font-family: Geneva,Arial;"></BODY> </HTML> ** || [[image:http://www.wigglebits.com/images/2a.gif width="216" height="244" align="bottom"]] ||

In your word processor, you may also have used formatting like this:
> indenting bullets fonts, colors and sizes tables You can do all of these things in a web page also. <span style="color: #000066; font-family: 'Comic Sans MS',cursive; font-size: 150%;">This one is as easy as bolding. Just say: > <span style="font-family: 'Comic Sans MS',cursive; font-size: 150%;">**<span style="color: #0000ff; font-family: Geneva,Arial;"><UL></UL> ** <span style="color: #000066; font-family: 'Comic Sans MS',cursive; font-size: 150%;">And stick the text you want to indent in between the two. <span style="color: #000066; font-family: 'Comic Sans MS',cursive; font-size: 150%;">Bullets follow the same concept only you stick in a bit of gunk for each bullet, like so: > <span style="font-family: 'Comic Sans MS',cursive; font-size: 150%;">**<span style="color: #0000ff; font-family: Geneva,Arial;"><UL><LI> <span style="font-family: Geneva,Arial;">Files <span style="color: #0000ff; font-family: Geneva,Arial;"><LI> <span style="font-family: Geneva,Arial;">Words <span style="color: #0000ff; font-family: Geneva,Arial;"><LI> <span style="font-family: Geneva,Arial;">Pictures <span style="color: #0000ff; font-family: Geneva,Arial;"><LI> <span style="font-family: Geneva,Arial;">Colors <span style="color: #0000ff; font-family: Geneva,Arial;"><LI> <span style="font-family: Geneva,Arial;">Links <span style="color: #0000ff; font-family: Geneva,Arial;"></UL> ** <span style="color: #000066; font-family: 'Comic Sans MS',cursive; font-size: 150%;">You can even pick the fonts, colors and sizes you want displayed, as long as the ones you pick are ones your visitors have on their machines. <span style="color: #000066; font-family: 'Comic Sans MS',cursive; font-size: 150%;">Geneva is a common Mac font and Arial is a font in Windows that looks like Geneva. Here's how you tell the browser what font to use: > <span style="font-family: 'Comic Sans MS',cursive; font-size: 150%;">**<span style="color: #0000ff; font-family: Geneva,Arial;"><FONT FACE="Geneva,Arial"></FONT> ** <span style="color: #000066; font-family: 'Comic Sans MS',cursive; font-size: 150%;">Here's how you can give your text some color: > <span style="font-family: 'Comic Sans MS',cursive; font-size: 150%;">**<span style="color: #0000ff; font-family: Geneva,Arial;"><FONT COLOR="993366"></FONT> ** <span style="color: #000066; font-family: 'Comic Sans MS',cursive; font-size: 150%;">More on how those funny numbers give you Color when we get to the next section. <span style="color: #000066; font-family: 'Comic Sans MS',cursive; font-size: 150%;">And here's how you can make it smaller than normal: > <span style="font-family: 'Comic Sans MS',cursive; font-size: 150%;">**<span style="color: #0000ff; font-family: Geneva,Arial;"><FONT SIZE="-1"></FONT> ** <span style="color: #000066; font-family: 'Comic Sans MS',cursive; font-size: 150%;">or bigger than normal: > <span style="font-family: 'Comic Sans MS',cursive; font-size: 150%;">**<span style="color: #0000ff; font-family: Geneva,Arial;"><FONT SIZE="+2"> </FONT> **
 * <span style="color: #000066; font-family: Geneva,Arial; font-size: 150%;">5Indenting ||
 * <span style="color: #000066; font-family: Geneva,Arial; font-size: 150%;">6Bullets ||
 * <span style="color: #000066; font-family: Geneva,Arial; font-size: 150%;">7Fonts, Colors and Sizes ||


 * ==<span style="color: #ec6a22; font-family: 'Comic Sans MS',cursive; font-size: 170%;">What the html looks like ==

Let's add this gunk to our page and see what it looks like in a browser. Hey! Our file is getting pretty big! Look at all that gunk.
It's starting to look like a real page: ||
 * <span style="color: #0000ff; font-family: Geneva,Arial;"><HTML> <HEAD> </HEAD> <BODY> <CENTER> **
 * <span style="font-family: Geneva,Arial;">Welcome! **
 * <span style="color: #0000ff; font-family: Geneva,Arial;"></H1></CENTER> <span style="font-family: Geneva,Arial;">I am an HTML Author. **
 * <span style="color: #0000ff; font-family: Geneva,Arial;"><P> **
 * <span style="color: #0000ff; font-family: Geneva,Arial;"><B> <span style="font-family: Geneva,Arial;">You <span style="color: #0000ff; font-family: Geneva,Arial;"></B> <span style="font-family: Geneva,Arial;"> can be one too! **
 * <span style="color: #0000ff; font-family: Geneva,Arial;"><P>This is all you do:<UL><LI> <span style="font-family: Geneva,Arial;">Files <span style="color: #0000ff; font-family: Geneva,Arial;"><LI> <span style="font-family: Geneva,Arial;">Words <span style="color: #0000ff; font-family: Geneva,Arial;"><LI> <span style="font-family: Geneva,Arial;">Pictures <span style="color: #0000ff; font-family: Geneva,Arial;"><LI> <span style="font-family: Geneva,Arial;">Colors <span style="color: #0000ff; font-family: Geneva,Arial;"><LI> <span style="font-family: Geneva,Arial;">Links <span style="color: #0000ff; font-family: Geneva,Arial;"></UL> **
 * <span style="color: #0000ff; font-family: Geneva,Arial;"><FONT FACE="Geneva,Arial"><FONT COLOR="993366"><FONT SIZE="+2"> **
 * <span style="font-family: Geneva,Arial;">Try it and see! **
 * <span style="color: #0000ff; font-family: Geneva,Arial;"></FONT></FONT></FONT> **
 * <span style="color: #0000ff; font-family: Geneva,Arial;"></BODY> </HTML> ** || ==<span style="color: #ff3399; font-family: Geneva,Arial;">What the Page Looks Like ==

<span style="font-family: 'Comic Sans MS',cursive; font-size: 160%;"> It's also possible to code tables in HTML (but it's a lot easier to use a [|Web Editor] so we won't go into the details). You can put words and pictures in rows (TRs) and columns (TDs) just like you do in a word processor. || <span style="color: #000066; font-family: 'Comic Sans MS',cursive; font-size: 160%;">NOTE: Your browser ignores the Returns you enter into the HTML file when you press Return. It also ignores any more than one space at a time and ignores tabs. So you can format your HTML file any way you'd like. <span style="color: #000066; font-family: 'Comic Sans MS',cursive; font-size: 150%;">That's the story on words. Of course, like all building blocks, the fun begins when you start combining them. <span style="color: #000066; font-family: 'Comic Sans MS',cursive; font-size: 150%;">You can put color in your headings, you can put bullet text in your tables, you can put colors in your bullet text, you can indent your headings, you can put headings in your tables, you can bold your bullet text, you can center your tables, you can do just about anything you want. The beauty is in the combinations. <span style="color: #000066; font-family: 'Comic Sans MS',cursive; font-size: 150%;">"Infinite Diversity in Infinite Combinations." Hmmm. I think I've heard that someplace before! <span style="font-family: 'Comic Sans MS',cursive; font-size: 150%;"> OK enough about words. Now let's learn about Graphics.
 * <span style="color: #000066; font-family: Geneva,Arial;">8Tables ||
 * This HTML:
 * <span style="color: #0000ff; font-family: Geneva,Arial;"> ** || Gets you this:
 * ==<span style="color: #ec6a22; font-family: 'Comic Sans MS',cursive; font-size: 41px;">Building Blocks == ||