HTMLJunction - HTML Lesson 2

ASP Coding

Let HTMLJunction Program your site with ASP. Rewrite existing code or install ASP scripts! Learn more...

Visit the new
HTMLJunction Store
A place for Coders, Programmers
and Computer Buffs

Top 5 Downloads

EZNewsletter: 11096
EZGallery: 6265
EZPoll: 6114
EZUpload: 5573
EZGuestbook: 4298

Download Stats

EZHomepageBasic: 1573
EZOnlineEditor: 3885
EZMedia: 3616
EZNewsletter: 11096
EZGuestbook: 4298
EZHomepagePro: 3511
EZGallery: 6265
EZPoll: 6114
EZUpload: 5573
EZScheduler: 2224
Avatars: 346
Smileys: 229
: 34
: 1
: 1

HTMLJunction News

ASP Article - Dynamic Date Dropdown Menu.

ASP Article - Import Text File to an Access Database.

EZScheduler now available for download!

ASP Junction has just been launched!

HTMLJunction has a new store!

More News...

Avatars for your Web Site

Smileys for your Web Site

Lesson 2

Html Editor and "tags"
In lesson 1 you got started with your own free web site (or else you skipped that one and came directly here). Now we're ready to move on.

This lesson will deal with editing and writing HTML. The next lesson will deal with uploading it to your web site and getting it on the web. So on with the first part....

Editor

NOTE: You do not need to use an Editor to follow along in this lesson! But now would be a good time to play around with it or if you are working offline you will need it!

The first thing you will need is an "Editor" , Something that will allow you to write html as well as view it. I recommend Arachnophilia 4.0 you can get it at my Downloads page at The Gunners Gallery. If you have any problems with it, dont be afraid to ask me, I'd be happy to help!

Once you have your Editor running open a new file and name it "test.html" (on arach. v4 its the globe with the page on it in the upper left corner, click on it and type in the word "test" were it says Page Title). It needs to be a blank page, so if it has any text, delete it (in arach.v4 it will have text, click on edit then select all, go back to edit again and click on clear.) Then click on the following link, copy the entire text and paste it on your blank page in the Editor. (page opens in new window) TEST PAGE, or use the test page to follow along without an Editor!

HTML tags

The First thing you will see is: <html>, the two signs <, > and everything inbetween is called a "tag" , the example above is called a "start" tag, almost all tags have an "end" tag, look at the end of your test page you will see: </html>, all end tags have a / symbol in it! The "html"in these tags stand for "Hyper Text Markup Language", (go to Html Goodies for a more detailed explanation). Everything on your html page will go inbetween these tags. your page muststart and end with these tags!! HEAD & TITLE tags

There are a few more sets of tags you need to be aware of, the next set is the <head> and </head> tags, these tags are known as the "Header", anything inbetween these tags are read by your computer and by certain things on the Internet, such as search engines and do not show up on your page, but that is another lesson. The only thing you need to note at this time is the <title> and </title> tags, whatever you put here is what shows up at the top of your browser! These tags have to go inbetween the "head" tags.

BODY tags

The next set of tags, <body> and </body>, are the second most important set of tags (The "html" tags being the most important), everything that shows up on your page goes inbetween these tags! These tags go below the "head" tags and not inbetween!

Now lets take a look at what goes inbetween those body tags.

Hold it you say! The start body tag looks different, its got more text than just "body" in it!

Yep, your right! The extra text defines the characteristics of the page! Lets look at them.

bgcolor="#ffffff": The "bg" means "background" and the "#ffffff" is the color code for white. Yep, you guessed it this will make the background white!
text="#000000": the "text" means the text on your page and the "#000000" is the color code for black, this will set your "defualt" text color to black!
link="#0000ff": The "link" means a link that you have not clicked on (or "visited"), the "#0000ff" is the color code for blue!
vlink="#800080": The "vlink" means "visited link", and the "#800080" is a purple color code!
alink="#ff0000": The "alink" means "active link" or the link that you just clicked on, and the "#ff0000" is the color code for red!

There other properties that can go here, such as if you wanted to use an image for a background you would put that here, but we will discuss that later! For now you can preview the test page(if you have an Editor), change the color codes and see what it does! you can get color codes here!

Now lets take a look at what goes inbetween those "body" tags.

Lesson 3

>>Printable Page<<