Words and Gunk

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.

1
Headings

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:

 

<H1>

  Your Heading

</H1>

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:

Your Heading

2
Bold

Bolding text is a piece of cake:

 

<B>

  Hello!

</B>

3
Center

Can you guess how to center something? Yup, put a centering bit of gunk before and after the words you want to center:

 

<CENTER>

  Welcome!

</CENTER>

Can you center a heading? Yup; just use both bits of gunk.

 

<CENTER>
<H1>

  Welcome!

</H1>
</CENTER>

4
Paragraph Break

And making a paragraph break is even easier:

 

<P>

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.

What It Looks Like

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:

 

<HTML>

<HEAD>
</HEAD>

<BODY>

<CENTER>
<H1>

Welcome!

</H1>
</CENTER>

I am an HTML Author.

<P>

<B>You</B> can be one too!

</BODY>
</HTML>

See? That was easy. Try it!

Other Ways to Format Words

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.

5
Indenting

This one is as easy as bolding. Just say:

<UL>
</UL>

And stick the text you want to indent in between the two.

6
Bullets

Bullets follow the same concept only you stick in a bit of gunk for each bullet, like so:

<UL>
<LI>
Files
<LI>
Words
<LI>
Pictures
<LI>
Colors
<LI>
Links
</UL>

7
Fonts, Colors and Sizes

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.

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:

<FONT FACE="Geneva,Arial">
</FONT>

Here's how you can give your text some color:

<FONT COLOR="993366">
</FONT>

More on how those funny numbers give you Color when we get to the next section.

And here's how you can make it smaller than normal:

<FONT SIZE="-1">
</FONT>

or bigger than normal:

<FONT SIZE="+2">
</FONT>

 

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.  

 

<HTML>
<HEAD>
</HEAD>
<BODY>
<CENTER>
<H1>

Welcome!

</H1>
</CENTER>

I am an HTML Author.

<P>

<B>You</B> can be one too!

<P>
This is all you do:
<UL>
<LI>
Files
<LI>
Words
<LI>
Pictures
<LI>Colors
<LI>Links
</UL>

<FONT FACE="Geneva,Arial">
<FONT COLOR="993366">
<FONT SIZE="+2">

Try it and see!

</FONT>
</FONT>
</FONT>

</BODY>
</HTML>

What the Page Looks Like

It's starting to look like a real page:

 

8
Tables

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.

 This HTML:

<TABLE BORDER=2>

<TR>
<TD>
Ya</TD>
<TD>
Ba </TD>
</TR>

<TR>
<TD>
Daba</TD>
<TD>
Doo!</TD>
</TR>

</TABLE>

 Gets you this:

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.

Building Blocks

That's the story on words. Of course, like all building blocks, the fun begins when you start combining them.

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.

"Infinite Diversity in Infinite Combinations." Hmmm. I think I've heard that someplace before!

OK enough about words. Now let's learn about Pictures.

Intro | Comm | Pub | Five Easy | Web Ed | Found | Squeezing | Standards | Animate | Epilogue

Files | Words | Pictures | Color | Links

 

All contents copyright (C) 1999-2007 Wanda Wigglebits. All rights reserved.