10 Steps To A Web Page

by ~~ Redondoguy ~~

Step 1

Place the "Opening Tag" at the very Top Left hand corner of the text editor like this:

Step 2

Place the head and title tags, giving your page a special title.

Also notice how we "close" the head and title tags by putting a slant / right after the <. That's because we are finished with them.

Also make sure to close them in the "Opposite" order that we opened them.

Let's place the tags like this:

Step 3
Now let's add the body tag.
Lots of information goes inside the body tag, like the colors for your page and text, or a background image.
Place it into the script like this:
<html> <head> <title>My Very First Web Page</title> </head> <body>

Step 4
Now let's add some things to the body tag.
Here's a link to a nice page of backgrounds at Stephanie's Gifs. Go there and pick one out. Make sure you "Transload" it!
There is a Transloader at the bottom of this page.
When you transload it give it a new name you will remember it by, like "backrusttex.gif" Kind of short for background with a rust colored texture.
Then bring it back here with the "new" URL. Use the whole URL so it will look like this http://www.oocities.org/tonymango/backrusttex.gif
Then put the URL in between the quote marks. Erase the dashes first. (TeeHee).
Also pick a nice color for your background and put the name of the color after the words bg color= Like this:
<html> <head> <title>My Very First Web Page</title> </head> <body bgcolor="______" background="_________">

Step 5
Now that you have a nice background you will need to choose a color and size for your text.
Just pick a good contrasting color for right now.
Now let's put your color choice in the body tag like this:
<body bgcolor="______" background="________" text="______">

Step 6
Now let's add some text.
All your text and images, graphics and links must go in between the "opening" body Tag and the "closing" body Tag.
Notice some new tags like "center" and "p" and "br" and the "b" tag which makes your text "bold"
The "center" tag does just that. It centers text and images on your page.
The "p" tag starts a new paragraph of text.
The "br" tag puts spaces between lines of text or images.
Also notice "p" and "br" do not have to have "closed" tags but the "center" and "b" for "bold" tags do.
I've written some text, but I want you to replace the dashes with your own choices. This is YOUR Page after all!
And let's "close" the body and the html tags while we're here.
To read this easier, I recommend you CC&P the contents of this text box and "Paste" it in the Test Bed at the bottom of this page.
<html> <head> <title>My Very First WebPage</title> </head> <body bgcolor="_____" background="________" text="____"> <center> WelcomeTo MyFirst WebPage!!!Notice how you can change the font size whenever you want. We just went from size 6 to size 4. Also we used the "b" for bold tag in the first two lines then didn't in the next line.Did you see the difference? Pick any number from 1 to 7 and replace the dash after font size=What size did you pick? Choose a different color hereYou can even change the font color whenever you want And notice how the font tags must have both an "Open" Tag and a "Closed" Tag each time we change them. Also notice the "p" Tag that was used to separate the words in your "Welcome" message. That Tag and the "br" Tag I just used to separate this line Do Not need to be "Closed". I can use the "br" Tag several times in a row to get deeper separations. Like This! But the "p" tag only works once. </center> </body> </html>

Step 7
Are You ready to take a Peek at what You have done?
First CC&P the script from Step 6 (above) with all your choices filled in.
Then scroll down to the "Test Bed" at the bottom of this page and "Paste" your script in the white text box. Then hit the "Display" button and you will see your New Page!
I've filled out my own choices in this text box if you want to compare. (TeeHee)
<html> <head> <title>My Very First WebPage</title> </head> <body bgcolor="lightblue" background="http://www.oocities.org/tonymango/backrusttex.gif" text="yellow"> <center> WelcomeTo MyFirst WebPage!!!Notice how you can change the font size whenever you want.I just picked Size 7You can even change the font color whenever you wantAnd notice how the font Tags must have both an "Open" Tag and a "Closed" Tag each time we change them. Also notice the "p" Tag that was used to separate the words in your "Welcome" message. That Tag and the "br" tag I just used to separate this line Do Not need to be "Closed". I can use the "br" Tag several times in a row to get deeper separations. Like This! Are you ready for some Music? </center> </body> </html>

Step 8
Are you ready for some music?
Here's a nice Web Site for Midis by Tboob. Go Here
Midis are musical images you can hear. Just click on a song title, and while you are listening to it play, hit your "Go To" Key and CC&P the URL just like you always do.
Make sure to transload it with a "New" name. Place the URL of the one you transloaded in the code I'm giving you.
And place the code right after the body tag. Like this:
<html> <head> <title>My Very First WebPage</title> </head> <body bgcolor="_____" background="________"> Put the URL for your MIDI (Music) where the dashes are, right after the body tag. Use this code: <embed src="___________" autostart="true" loop="-1">

Step 9
Images, Graphics, Cartoons, Pictures.
Let's go back to Stephanie's Gifs. She has some wonderful Graphics. Go HereTransload one and put the URL to that in this code:
<center><img src="______"></center>

Step 10
Let's put it all together!
Just fill in the blanks. CC&P the script you wrote. Take it to The Test Bed and preview Your First Web Page.
Then take it to your Server Account "Paste" it in your File Editor there. Hit Save and your First Web Page is finished.
Congratulations!
<html> <head> <title>My Very First WebPage</title> </head> <body bgcolor="______" background="________" text="____"> <embed src="________" autostart="true" loop="-1"> <center> WelcomeTo MyFirst WebPage!!! </center> <center>Go ahead and write something here just for the practice, using the "p" tags (paragraph spacing) and the "br" tags (page breaks). Change your text size too. Add an image before you close. <center><img src="______"></center> Then "close" the last two tags. </body> </html>

Transloader

TRANSLOADER.COM

FTP Host:

FTP Directory:

FTP RE-Name:

FTP UserName:

FTP Password:

TESTBED

Tool Shed Page 1
Tool Shed Page 2
Tool Shed Page 3
Tool Shed Page 4

Copyright© 2000-2001 Redondoguy's Resort, All Rights Reserved