When You Wish Upon A Star

I wish I could create my very own web page!

*

You can!

Here is a step-by-step guide for creating a simple web page.

HTML consists of lots of tags. One thing to remember is that tags begin with the less than symbol or left carat <, and end with the greater than symbol or right carat >.

Don't try to use parenthesis instead ( ). They won't work. You must use the carats.

And, speaking of carrots, let's pretend we want to create a web page about our pet bunny. All web pages should include the following tags at the beginning and end:

<HTML>
<HEAD>
<TITLE>
I love my Bunny!
</TITLE>
</HEAD>

<BODY>
Everything else goes in here!<BR>
</BODY>
</HTML>

Let me explain a bit about the above code. At the beginning and end of each page you must have the <HTML> and </HTML> tags. In between it doesn't much matter what you have. If someone wants to bookmark your web page, it is nice to give them a title that will show up in their bookmark. In this case I have given a title.

<HEAD>
<TITLE>
I love my Bunny!
</TITLE>
</HEAD>

When someone bookmarks the page we are creating, it will show in the bookmark list as "I love my Bunny!"

Once we get our page "HEAD" done, we will want to add everything else to the "BODY". Everything else will go between these tags:

<BODY>
Everything else goes in here!<BR>
</BODY>
</HTML>

We might want to put Bunny's name at the top of the page, like so:

Bunny

The commands used to create the above centered heading are:

<CENTER>
<H1>Bunny</H1>
</CENTER>

There are 6 possible headline sizes: <H1> - <H6>. Notice how at the end of the headline I added </H1>. This tells the browser application that I am done with the headline and to go back to the default body style and size. The ending tag on a headline also says to "break" the line automatically. Notice how I also added <CENTER> to tell the browser application to CENTER the headline. See the closing tag </H1>? Most every tag requires a closing tag. The closing tag tells the browser application that you are done with the tag and to go back to normal.

There is a tag that does not require an ending tag. That is the "BREAK" tag: <BR>. You place this tag after every line where you would type an <ENTER> if you were doing a text document that is not a web page. As a matter of fact, you can type <ENTER> as many times as you want in a web page and the browser application will ignore it because it doesn't mean anything to it!

Another tag that does not require an ending tag, (but has one), is the "PARAGRAPH" tag: <P>. You place this tag after every paragraph or sentence where you want a little extra space added. I've used the PARAGRAPH tag for these paragraphs, rather than the BREAK tag, because I want a little extra space between the paragraphs. Adding a whole bunch of <P><P><P><P><P>'s in a row won't do any good. The extras will be ignored. If you want a bunch of extra blank lines, use the <BR><BR><BR><BR> instead.

As I said, the PARAGRAPH tag has an ending tag: </P> tag. But hardly anyone ever uses it and many HTML programmers don't even know it exists! So you know more than some HTML programmers do already! If you want to use it, go ahead. But it just requires more typing so leave it out if you want.

Now we are ready to begin the rest of our page about Bunny!

We decide after our heading, we want to put a picture or image of Bunny. You can scan a photo or draw your own using Window's Paint program or some other application. But you must then make sure the file is saved as a GIF or JPG file. Window's Paint program will create a BMP, but not a GIF, but there are a lot of utilities on the internet that will convert your BMP to a GIF.

Once you get your image created and converted to the right format, you can load it into your document with the following commands:

<CENTER>
<IMG SRC="bunny.gif" BORDER=0 HSPACE=15 VSPACE=15 >
</CENTER>
<P>

The above block is saying: Center the next stuff, and insert an IMAGE (IMG SRC) with the name "bunny.gif." This assumes "bunny.gif" is found in the same directory as this web page. You can get fancier with this command and link to an image almost anywhere on the web. We won't talk about that here though.

The above command also has "BORDER=0". This tells whether to add a border around the image. Play around with it and see what it looks like with a BORDER=5 or BORDER=2. If you like the look, keep it. BORDER=0 displays the image without a border.

Also in the command is "HSPACE=15." This says that if you have text surrounding the image, to have at least 15 points of horizontal space on either side of the image so the text doesn't run into it. "VSPACE=15" works the same except it applies to the vertical space, or the space at the top and bottom. Here is what the above command will look like:

Bunny

Now we want to add some descriptive text about Bunny. We can type that alongside the image. Also notice how I added <B> and <I> (with their ending tags). These commands make the text Bold and Italic.

<CENTER>
<IMG SRC="bunny.gif" ALIGN="LEFT" BORDER=0 HSPACE=15 VSPACE=15 WIDTH=60%>
<B><I>
Bunny
</I></B></CENTER>
I love my Bunny. He is white with brown spots. He is a Holland Lopeared Rabbit. He is a year old.
<P>
He likes to eat. He likes to go outside and hop around the yard. He likes to sit under the weeping willow tree. Sometimes he is a lazy bunny, but that's okay because I love him anyway.
<BR CLEAR = ALL>

Notice we added WIDTH=60%. If the browser window is set small, it will make the Bunny image smaller to fit in the window. If the browser window is large, it will increase the size of the Bunny image. The above code will end up looking like this:

Bunny
I love my Bunny. He is white with brown spots. He is a Holland Lopeared Rabbit. He is a year old.

He likes to eat. He likes to go outside and hop around the yard. He likes to sit under the weeping willow tree. Sometimes he is a lazy bunny, but that's okay because I love him anyway.

Notice a few changes in the above code. Now the Image tag uses the ALIGN="LEFT" command to tell the image to line up on the left. The text aligns to the top right of the image. But if there is not enough text to fill to the bottom of the image, we added <BR CLEAR=ALL>. This tells the browser application to BREAK and clear to the end of the Image.

Now we want to create a list of Bunny's favorite foods. Here is the code to do that:

<FONT SIZE=6>
Bunny's Favorite Foods!
</FONT>
<FONT SIZE=5>
<UL>
<LI>Carrots
<LI>Celery
<LI>Ginger Snap Cookies
<LI>Corn on the Cob
</UL>
</FONT>

Bunny's Favorite Foods!

Notice how I've added a new tag: <FONT SIZE =6>. This allows you to change the size of your body text without declaring it as a header. Try different sizes and see how you like them. Seven (7) is the biggest you can make it. Don't forget to include th e closing FONT tag: </FONT>.

You will notice that when you bring up your web page in a browser application, it probably comes up in a drab grey. To make your background white, replace the <BODY> tag with this:

<BODY BGCOLOR="#FFFFFF">

You can set your color to any color you want. An easy way is to go to the Internet and see what background color you like on another site. If you find something, use the "View Source" in your browser menu item and see how their BGCOLOR is set. Then copy those values into your own page. You can also use a background graphic for your web page. There are a lot of Beginner and Intermediate HTML Tutorials which provide detailed information on how to do this and much more.

Now we want to add our name, e-mail address, and the date we last made changes to the page.

<HR>
<ADDRESS>
If you have more questions about Bunny, contact me at:
<BR>
<A HREF="mailto:fakeaddress@fakedomain.com">Name</A><BR>
Last modified: November 21, 2000
<BR> </ADDRESS>

This will look like this, but be sure to use YOUR e-mail address and name, and not mine!


If you have more questions about Bunny, contact me at:
Name
Last modified: November 21, 2000




*

See our FINISHED PAGE!

*


*



Home

* Stories
* Grandpa Doesn't Like Cats * Top Secret Dad

* Other Fun Things!
* Kid's Playroom * Snag Some FREE ART! * Baby Moses Screen Saver

* HTML, Form Example & Stuff
* EZ HTML Tutorial for Kids * Our Finished Bunny Page
* Voting Booth Form Example * Other Sites by MoonDust

* The Site Fights!
* Kids Karnival Had Fun at the Site Fights!

* Awards!
* Awards, Memberships & Other Stuff * Apply for Our Awards!

* More Stuff!
* About Us! Our Bios! * Scrawl Wall * Goodbye!


*

Last modified: November 11, 2000

*