Astro Lesson #3 every.body.needs.somebody.sometime!
Since our last lesson, ReTroGrrl has discovered a bit of slackness on
her part (bad ReTroGrrl, bad!) She forgot to mention the Head tag... this
should go like this
<head>
<title> blah blah blah </title>
</head>
Why? Who knows, suffice to say that some strange things began
to happen with Netscape Navigator when they were missing from these pages.
Nuff said! To be extra pernicky, you should also help Mr Browser determine
what kind of HTML he is dealing with here: store-bought web publishing
packages insert it for you, but it goes kinda like this ...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
It should be put at the top of your HTML document - the '!' merely
stops this line from being displayed on the actual web page - and in this
case, is saying "Look at me, I'm HTML 4.0, hooray". This means the page
is compliant with the latest HTML standards.
Now where were we? Ah yes - bodies. we need to specify where the body
- the meat - of our beautiful html work will be, and set some rules for
the browser display. At the same time, we can set the background appearance.
Check this out -
<body bgcolor="#000000">
all the stuff which makes up our page goes in between the body tags
</body>
'Holy Moly, Batman!' Hey now, settle down - let us explain. First of all 'bgcolor' simply means 'set the background
color', okay? Good. Secondly all that #000000 business is hex talk (we'll talk about that in a later lesson!) for plain ol' BLACK. Alternatively,
you can call the color by its old fashioned name - black, see?
<body bgcolor="black">
If you don't have a list of these color numbers handy, but you remember
the name, sometimes this is the easiest method - just remember not all
colors can be identified this way, and some older browsers may have trouble
understanding what you mean. (Don't forget to include the quotes where
specified!) Professionals would only use the hex numbers.
- Don't want a color? How about a neato background instead
- sure thing. All you need is a .gif or .jpg graphic file. When this
is included in the body tag, the browser knows to repeat it as a pattern
to fill up the entire page. View the source code on this page. Only
use these 2 formats. They are the standard file types for web graphics.
(the new PNG format is not supported by all browsers).
The background is set to "stars.jpg" - telling the browser to run along,
find that jpeg and repeat it to fill up the whole screen - clever, ain't
it? Of course, this can be substituted with any graphic you like, and
it's always nice to use a seamless tile. We ain't talking roofing materials
here - a tile simply refers to a small graphic that gets repeated. If
it's 'seamless', it's just hard to tell where the joins stop and start.
Lots of graphics programs help you to do this - otherwise find some
free ones around the web. (To start with, put all your graphics, animations
etc in the one directory, or folder - this way you won't be complicating
things for yourself) Once you are confident you can decide whether or
not to use different directories, and how to use absolute
or relative pathnames
The format should then be :
<body background="myjpg.jpg">
Project Cool have a list of colors and their weirdo number-names. Go there!
Okely dokely, now let's start with some text so that you can actually
see something happening on your screen and therefore not become
discouraged at this early stage. We'll go into the fiddly bits later.
Type in some text between the body tags (where the blah blah is)
- Terrific! Hmm, pretty boring though - how about we spice it up
a little. We can you know! Just pull out the little old FONT tag
and a whole new bag of tricks opens up before your very eyes ...
<font
face="verdana,arial,helvetica" size=3 color="red">some
text here</font>
- FACE - what kind of font to use. It's
becoming safer to use something called 'style sheets' instead of the
older font tag, which will eventually be phased out, but we think it's
nice to start by using this tag. It helps make sense of style sheets
when you are feeling more confident, and we'll be covering these later
anyway.
Stick with the universal basics for this one. Fancy fonts may look stupendous
to you, but if the rest of the universe does not have that particular
font loaded onto their machines, it will look plain ordinary to them.
Choose something like arial or helvetica or verdana. In fact,
it's nice and polite to suggest a few - just in case your visitors don't
have one or 'tother. That way, if they don't have the first one you
specified, the browser will look for the next one and so on. (Otherwise
it defaults to the browser default which could be something yukky and
boring like Times!)
Note: Verdana is a font that was specially designed to make reading
text on the web easy - these lessons use verdana, so hopefully you have
it. If not go back to the main page and you'll find a link to download
it from Microsoft.
- SIZE - The size of your chosen font can
be really big! or really small!
Set the size attribute from 1 to 7, or with a plus (+2) or minus (-2)
to produce increments of the font you originally set for the whole page.
In other words, if you start a paragraph with a font size "2",
you can type some more text and give it a font size of "+2"
which will really make it size 4 - get it?
- COLOR - Refer to what we said about color
earlier and the color of a font can be set just as easily.
Now we can put them all together, inserted in front of your designated
text
<font face="verdana,arial,helvetica" size="3"
color="red">
blah blah blah
</font>
- Groovy!
In order to turn these font specifications off don't forget to insert </font>
. Please go away now and play with these nice new toys. Next time we will
discuss some fiddly bits, like text link colors and doing this HEY!
and this Hey! or even this HEY!
Astro Lesson #3 now comes to a timely end.
next.pod
copyright.wendy.phillips.1998
|
