|| who | favorites | pictures | scraps | links | guestbook | contact | x ||




Lesson 1...The Basics

This is Lesson 1 in my series of Basic HTML Tutorials. I'm going to start out very simple here, and we'll work our way up!
Let's get started...

The first thing you will need to do is open up an account at geocities to practice your HTML skills with. Just go to their website and sign up as a new user, or if you already have a Yahoo! ID, you can sign in using that.
Go ahead and do that, I'll wait! lol
Now that you've done that...

These are the basic tags you will need to get started on any website:



<br>



Hosted by www.Geocities.ws



The tag tells the browser this is the beginning of an HTML document.
The tag has many different uses, but we won't get into that here... just know that you need it!
The tag is where you put the title of your webpage. What you enter here is displayed in the title bar of your browser.<br> The tag is a closing tag, which ends your title tag.
The tag closes the head part of your document.
The
tag begins the body of your document. Everything entered after this opening tag will be displayed on your page.
The tag closes the body of your document.
And finally, the
Hosted by www.Geocities.ws

tag closes your HTML document.

Now that you know what each tag means, please remember, you will need to include all of these basic tags in every HTML document you write.
Also, please DO NOT copy and paste the tags you see here into your own document! You would only be hurting yourself because the only way to learn is to do... that means type the HTML codes yourself!
That said, now go ahead and enter your user ID and password at geocities to log into your account.
After you've logged in, click on File Manager, then click Open File Manager, and you're in!
Next, you'll need to click the box next to index.html, then click on edit.
When this page opens, you will see a large box in the middle of the screen with some HTML codes already typed in for you. I want you to highlight all of that stuff and then hit the backspace button. POOF! Its all gone...

Now you're ready to start!
I want you to type in the basic codes you just learned that are listed at the top of the page. Don't copy and paste!

After that, I want you to find your tag. Right after that tag, go ahead and type in the name of your page. It can be anything, but for our purposes, I'm going to call it "my webpage".<br> You're document should now look like this:<br> <br> <html><br> <!-- ARCHIVE by GEOCITIES.WS --> <head><br> <title><br>my webpage<br>



Hosted by www.Geocities.ws



Next, we're going to enter some text for the body of your webpage. Find the
tag. Starting right after that tag, type this sentence:
Welcome to my very first webpage!

Now your document should look like this:



<br>my webpage<br>


Welcome to my very first webpage!

Hosted by www.Geocities.ws



Now, I want you to stop and hit the "save and continue" button on your screen. This saves your work, but lets you continue to edit. Now, I want you to open a brand new browser window and enter your website address in the address bar. It should be something like this: http://www.geocities.com/yoursite, with the words "yoursite" being replaced by your geocities user name.
Hit enter and let the page load. You should see the title you entered in the title bar, and your welcome message should appear on the screen.
Congratulations! You've just created a webpage!

Ok, that's very very simple stuff. Let's play with the text on your webpage, but first you'll need to learn a new HTML tag...



This is the font tag. Place the opening tag right before your text and the closing tag at the end of your text. Go ahead and do that... now your document should look like this:



<br>my webpage<br>


Welcome to my very first webpage!

Hosted by www.Geocities.ws



This tag alone will not alter your text. But there are several things you can add to your font tag. Let's do this:

Adding the "face" attribute tells the browser which font you want your words displayed with. Here I'm using Verdana, but you can use any font you want. Just keep in mind that unless your viewer has that font on their computer, they won't be able to see it and their computer will use the default font. It's best to stick with 3 or 4 common ones like Arial, Verdana, and Comic Sans MS.

Next, let's add color. It's easy:


There are several colors that your browser will recognize, such as red, black, green, blue, yellow, and pink. You can also enter the code for the color you want, such as #FFFFFF, which is white.
Now that we've got color, let's make the text bigger:


Now it should look like this when you view it:

Welcome to my very first webpage!

Feel free to experiment with entering different numbers for the size, and entering different colors and font faces.

Hit the "save and continue" button again, and switch over to the other browser where you were viewing your page and click refresh.
Remember to save your work often. And also pay close attention to the < and > and the " " marks. If you leave them out, your page won't view correctly.

I think that's enough for your first lesson. You've learned the basic HTML tags, you've learned how to enter the title of your page, you've learned to enter the information for the body of your document, and you've learned some of the attributes for the font tag.
You should be proud, you've created an HTML document from scratch!
Give yourself a pat on the back!

Coming soon... Lesson 2...Adding Images to your website
Hosted by www.Geocities.ws

1