Menu



error This forum is not active, and new posts may not be made in it.
Daniel Meritt

1379
541 Posts
541
Invite Me as a Friend
Person Of The Week
HTML Lesson 3
11/21/2007 10:30:50 AM

Lesson 3


If you used the HTML you learned in Lesson Two to make a page for yourself, you probably learned a couple of things...

First, it works.

Second, if you only use those few tags you learned in lesson Two, necessary as they may be, your page will look really, Really, UGLY!!

Don't lose heart, it does get better. After this lesson, and the next, your page will look much better.

The Incredible Body Tag


Remember the BODY tags?

That's the pair of tags from the last lesson which shows where the body of the document begins and ends. All of your content goes between the opening and closing Body tags.

The last lesson showed you a really bare-bones body tag. Let's beef it up a bit, and see what it can do...

If you'll recall, the Body tags look like this:

 

<BODY> </BODY>

Well, our supercharged Body tags are a bit more complicated, but well worth learning about. The Body Tag controls a lot of what your page will look like. Here's an example:

 

<BODY BGCOLOR=white TEXT=black
LINK=blue ALINK=green VLINK=red>
</BODY>

Now is that a mouthfull, or what? Don't let it scare you, it's all pretty simple once you break things down a little.

An HTML Tag has different parts, but they are all set up in a very standard way.

 

 

<ELEMENT ATTRIBUTE=value>

In the Body tag example above, BODY is the element, and BGCOLOR, TEXT, LINK, ALINK, and VLINK are the attributes.

The Element tells what the tag is in a general way, and the Attributes describe the tag more specifically.

Let's look at each attribute in the example.

 

 

BGCOLOR=white

This determines the background color for the entire page. I use white here, but you could use red, blue, green, black, almost any common color. If you want to get really wild, you can use a hec color code, but we'll discuss that later.

 

TEXT=black

Obviously, this controls the color of the page's text. Again, you can use almost any common color.

 

LINK=blue

This will be the color of your hyperlink before it's clicked on. Links have to be a different color than the text, so that your visitor knows that it's a link.

 

ALINK=purple

Ever notice a link turn a different color while it's being clicked? That's because the ALINK attribute was set to a certain color.

 

VLINK=red

Once a link has been visited, the color will be whatever color the VLINK attribute specifies.

You can also effect text size by using it in a header, which is something we'll discuss in the next lesson.

A Little Background ...


The Body tag has one more spiffy attribute we need to discuss.

By Using the BACKGROUND Attribute, you can tell the browser to go find a certain image file on your server, and use that image for the background. This attribute will over-ride whatever you specify for a bgcolor.

In order to use the Background attribute, you need to have the address of an image file on the web. Here's the same Body tag example we started with, but with a Background attribute.

 

<BODY BGCOLOR=white TEXT=black
LINK=blue ALINK=green VLINK=red
BACKGROUND="http://dis.dozier.com/chalk.jpg">
</BODY>

Make sure you place the url in quotation marks!

Stand Alone Tags


Remember how I told you in lesson two that most HTML tags work in pairs, but that there are a few exceptions? Here they are:

 Remember to take out this ! when ever you see it. I have to put this in or the code will not show.

<P>   <!BR>   <!HR>
Paragraph Line Break Horizontal
Rule

Technically, the PARAGRAPH tag is not really a stand alone tag. But, you don't have to use a closing tag for it, and hardly anybody ever does, so I've included it here.

Use the Paragraph tag whenever you begin a new paragraph. This will leave a blank line wherever you use it. (Like between paragraphs!)

The Line break tag will force your text to start on the next line.

Finally, the Horizontal Rule tag will give you a thin black line across your page.


Just to help out a bit if you want to Join this FREE site It will help you practice what we learn here.


Main Forum

Main Page

Lesson 1

Lesson 2

Lesson 3

Lesson 4

Lesson 5

Lesson 6


Daniel






+0
Re: HTML Lesson 3
11/21/2007 11:13:10 AM
Hey Daniel, I don't know how far you planned to go with these lessons, but being my own webmaster since 2002 or so, I thought I'd throw in a tip here for those concerned about standalone tags. Hope you don't mind. Stand-alone tags in today's web invironment should use a slightly different formatting to be fully compliant with expanding standards, and soon will need to be used anyway. The new formatting of stand-alone tags uses a space and a forward slash, something like this: < />. So, for example, the

tag would now become

; the
tag would become
; and the


tag now becomes
. Also, you might have noticed that I used lower caps instead of upper caps. The reason for this is that lower caps make the formatting comliant with "xhtml",which is set to replace "html" as we know it, in a few years from now or sooner. And since all browsers can read "html" in upper OR lower case, it would behoove you to get in the habit of using lower caps now, so when "xhtml" becomes the De Facto Standard, your code will already be compliant with the new standard. One more thing to note here; When you use this NEW formatting with your code, there is no need period, for any closing tag on the

tag, as XHTML automatically recognizes the new code and processes it as if it did have an end tag with it. Hope this helps everyone new to HTML. And Daniel, Like I said before, hope you don't mind if I threw this in. If you'd rather I wouldn't just let me know, and I'll respect your wishes. Until the next one, I am, Benton Middleton, Independant Ecopreneur

Create Your Own Job, Because EVERYBODY'S an expert at something! Don't know how? Get your FREE 10-STEP BLUEPRINT at: Http://www.CreateYourOwnJob.net/blueprint
+0
Daniel Meritt

1379
541 Posts
541
Invite Me as a Friend
Person Of The Week
Re: HTML Lesson 3
11/21/2007 11:34:52 AM
Hi Benton

Thank You for that...I don't mind at all.

Anybody that can add to this are always welcome to post here and help out.

I am starting off with just the basic understanding of HTML for now...Just to give everybody a feel for it.

We can expand as we go along.

I am trying to set this up so that it does not matter what level you are at in HTML or any other programming Language that everybody will get something from this.

I am just watching and seeing how everybody is following along here...I don't want to get in too deep too fast and loose anybody here !

Understanding what tags are and how they can help you is Huge...So I want to spend allot of time on Tags.

XHTML is going to be the new way thats for sure but the nice thing about Programming is that once you understand the basics then it is easy to switch over to a new language.

When I was in School the teacher taught us C++ and none of us understood why they would teach us an old Language like that.

As we moved on through the course we saw that by understanding C++ made things allot easier to understand Flash, PHP and many others as they all have the same Principles and all work similar.

Thank You for adding to the thread Benton.

Daniel


+0
Nick Sym

4679
23156 Posts
23156
Invite Me as a Friend
Top 25 Poster
Person Of The Week
Re: HTML Lesson 3
11/22/2007 3:55:04 AM
Breast Cancer Awareness On My Site! http://www.freewebs.com/nicksym Free exposure that works http://www.webbizinsider.com/Home.asp?RID=55242
+0
Re: HTML Lesson 3
11/22/2007 7:39:45 AM
Thanks to both of you for the info.  It is always good to learn updated things as well as the basics.  It is like when I took Latin in High School I thought it was stupid, but now I see words and understand where they originated (too bad the teachers didn't tell us that at the time)
Shirley Manion MoneyMakers, Shopping, blogs, fun places http://www.connectionsecrets.com/webmasterhelpers Shopping Bargains and Deals Connections http://www.connectionsecrets.com/bargainshopping Your own fun Iggly Biggly business for only $20.00 h
+0


facebook
Like us on Facebook!