BASICS
This is the starting point for putting together a web
page. Here are the things that will be covered:
INDEX
|
•••••
•••••
•••••
•••••
HTML???
So What IS HTML?
Did you ever watch Carol Burnett end a show or performance and
tug on her left ear? Well that's a code (she was
saying "hello" to a family member)!
HTML is a code system too. The letters HTML stand for
HYPER
TEXT
MARKUP
LANGUAGE
|
and there are a lot of places on the internet where you can
find an extensive definition and complete history of what it
is and how it came to be, so I don't intend to go into all of
that here...
Suufice to say that it is the name of the coding system which
allows you to create a web page and tells your computer/WebTV
how to read what you have written!
•••••
•••••
•••••
•••••
ADD/SUBTRACT
This is one of the most important principles to remember when
putting together your web page. It is one that can be easily
overlooked by WebTV users because (for better or worse) the
WebTV system is often more forgiving than a computer when
reading a web page... Quite often an error in html coding will
be ignored by the WebTV system, while a computer looking at
the same page will be detered from viewing a part or the whole
page. I discovered this when I asked a friend (a computer
user) to check out a web page that I had created... She could
not get to a specific part of the page that I wanted her to
see... yet I (on my WebTV system) could view the page
perfectly!
The problem that my friend was experiencing was caused by a
simple error in the html coding... an 'add/subtract' error.
What is meant by this is that a page of html coding must be
'taken apart' in the reverse order that it is put together.
Almost every piece of html coding (tag or command) has an open
statement (example: <html>) and a closing statement
(example: </html>). If you were to split a page (or
section of a page in the case of a 'table,' for example) in
half, there should be a mirror effect.
Without using specific html code, here is an example:
GOOD
<RED>
<WHITE>
<BLUE>
</BLUE>
</WHITE>
</RED>
|
BAD
<RED>
<WHITE>
<BLUE>
</WHITE>
</BLUE>
</RED>
|
You Can open another command/s (or tag/s) of the same
name between open commands, just as long as every command is
closed in the proper sequence.
In this example I'll use upper and lower case for the commands
to help you follow the sequence:
GOOD
<RED>
<WHITE>
<white>
<blue>
</blue>
</white>
<BLUE>
</BLUE>
<red>
</red>
</WHITE>
</RED>
|
BAD
<RED>
<WHITE>
<white>
<blue>
<BLUE>
</blue>
</white>
</WHITE>
<red>
</BLUE>
</red>
</RED>
|
•••••
•••••
•••••
•••••
SO WHAT'S THE CASE?
In the previous section (ADD/SUBTRACT) you
may note that I typed the commands/tags using both
UPPER and lower case letters. Either is fine,
however, you should not mix UPPER
and lower case letters in one command/tag. In other
words, <WHITE> is okay but <WhitE>is
not.
It is okay to mix <WHITE> and <white>
within a page of coding (you can open with<WHITE> and
close with </white>) just don't mix the
UPPER and lower case letters within a set of the
"<" and ">" brackets.
•••••
•••••
•••••
•••••
ON EVERY PAGE
Every HTML page (and there are other types of pages which will
be discussed in another part of the Tutorials) will contain
the following code commands in the following order:
<HTML>
<HEAD>
<TITLE>
The Title Of Your Page Would Go
Here.
</TITLE>
</HEAD>
<BODY>
The TEXT and COMMANDS/TAGS That
Structure The Actual 'Look' And 'Content" Of Your Page Would
Go Here.
</BODY>
</HTML>
It is not neccessary that each tage be placed on a
separate line as show above... you can type it as one
continuous line:
<HTML>
<HEAD>
<TITLE>
The Title Of Your Page Would Go
Here.
</TITLE>
</HEAD>
<BODY>
The TEXT and COMMANDS/TAGS That
Structure The Actual 'Look' And 'Content" Of Your Page Would
Go Here.
</BODY>
</HTML>
However, it may be easier to find errors when you are first
starting to learn how to create a page if you use the separate
line method.
Also, note that the <BODY> command/tag usually contains
other elements and this will be discussed in section #5.
•••••
•••••
•••••
•••••
BUILDING YOUR BODY
In the previous section we discussed the basic elements of a
web page:
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
|
Now we'll discuss how to "Build Your Body!"
Actually the body tage can stand alone. If it does,
however, there are a set of default varues which will be
applied to your page. These are:
- Page Color: Gray
- Text Color: Black
- Link Color:
Blue
- Visited Link Color: A Pale Redish Purple
If that's what you want, fine... but you can change
these elements... plus you can add a background to your
bpage as well!
Let's take a look at the BODY tag for the page you are looking
at now:
<body bgcolor="#9900ff"
background="/imagelocation/gstar.gif" text="#000000"
link="#ff0000" vlink="#0000ff">
- bgcolor
- defines the backgound color (in this case, "#9900ff") -
we'll dicuss colors more later, so let's just accept the facrt
that that code produces the color you're looking at now.
- background
- defines a pattern or picture or design that is the
background for your page. (in this case,
"/imagelocation/gstar.gif" - which is a made up URL for this
example) - if the image is partially transparent, as the star
gif is, you will see your background color through it.
Otherwise, the background color will only display until the
background image replaces or covers it.
- text
- defines the color of the text on the page (in this case
"#000000" which creates black).
- link
- defines the color of the links on the page (in this case
"#ff0000" which creates red).
- vlink
- deines the color of the visited links on the page (in this
case "#0000ff" which creates blue).
|
•••••
•••••
•••••
•••••
TEST YOURSELF
This is a s good a place as any to suggest that as you go on
through the process of building your page, you stop from time
to time and test the coding you have entered so far. The SITE INSPECTOR" is a
great place to do just that! And it is a good idea
(particularly when you're first learning html) to test your
page often... that way you can find a small mistake and
correct it before it grows... and they can grow! I've
seen one small mistake pyramid into 30 or more errors - and
then you have to study the results of the test to see what
mistake (or mistakes) are the root of you problem... 30 errors
may be 30 mistakes, but more often than not they can be
eliminated by correcting just one or two bad pieces of html
coding!
So do yourself a favor - save the SITE INSPECTOR" in
your favrites so you can access it quickly!!!
•••••
•••••
•••••
•••••
WEBTV "DON'TS"
Web TV is a Wonderful thing! I own a computer and
still prefer the ease and user friendliness of my Web
TV and therefore use it for 98% of my online time.
THAT
SAID
there are a few... err... well, flaws in Web TV when it comes
to homepage building... Actually 'flaws' is the wrong word...
actually Web TV has a few abilities that regular computers
don't - and while the first impulse is to say, "Hey! That's
what makes Web TV so great" --- well, in my mind it's not -
and again, I'm speaking in terms of web page construction...
these abilities tend to do three things:
- Let Web TVers view poorly constructed pages...
- Problem: Pages that might not have their HTML
coding exactly right for a computer to see may appear perfect on the WebTV system which seems to ignore certain HTML coding flaws... This can make
Web TV page builders sloppy when putting their pages together,
and if you want to reach the world (instead of just fellow Web
TVers) with your homepage, you gotta do it right!
- Solution: Use a tool like the Site Inspector
religously when putting your web page
together.
- Let WebTVers Use Shortcuts When Building Pages...
- Problem: The WebTV system often reconizes words while most systems only recognize codes. The best example of this is in the use of color. while WebTV will 'read' the command/tag:
<font color="red">
to mean that you want your text to be printed in red, many other systems won't know what to do with the command. The proper way to state it is:
<font color="#ff0000">
which uses the hexidecimal (universally read) code for the color red. Sure it's not as easy but, hey - it's the better way to do it!
- Solution: Don't take the easy way out... use universally read codes so that everyone (WebTVers & Computer users alike) can enjoy the full effect of not only what you have to say, but how you say it!
- Let WebTVers Create WebTV-Only 'Special Effects'...
- Problem: Many WebTV HTML tutorials will offer neat 'tricks' - things/effects that you can add to your homepage which only other WebTV systems can read... or read correctly... commands/tags that make things flash or scroll across your screen... effects that create a sidebar (like you see when you go to view your WebTV email)... These may look Great on your WebTV, but I've seen some of them on a computer... they either don't work -or worse, they look like... well, crap!
- Solution: Don't use fancy do-dahs on your page unless they are able to be read/interpreted by computer users... cause if it doesn't translate right, that 'Beautiful' home page you create and send to a Computer-user friend, may make them think "you don't know you knee from your elbow" when it comes to good HTML coding (that's the cleaned up version of the old cliche, so as not to offend - hehehe)!
|
•••••
•••••
•••••
•••••
BEFORE YOU CONTINUE
A quick note... it is helpful when you are working on your
webpages to have your text size set on small (this is a
message directed specifically at WebTV users). This can be
done from your WebTV homepage by clicking on the "Settings"
link and then the "Text" link.
There are two reasons for this:
- It gives you a better perspective on what other viewers
may see... particularly computer users - and of course, other
webtver's who keep their own text size set at small most of
thre time.
and
- Whatever size you have your text set at - BE
CONSISTANT when working on your web pages... there's a strange
little glictch that can occur if you first type in an html
code using the LARGE text setting and then go back
to work on it with the SMALL text setting...
don't ask me why, just trust me on this one...
|
•••••
•••••
•••••
•••••
•••••
