|
Unless you've got a pretty remarkable site,
you're not going to get very far without text. Here's how you work with it.
Here are the topics in this section:
The Font Tag
Headings
Text Links
Lists
Marquees
The Font Tag
The <FONT> tag is great, you can do a lot of
different things with it. You can change the font from Verdana to
Times New Roman and
back again. You can change the size
to whatever you want.
You can change the color. All in all, a superb
tag.
It's pretty straightforward, too. To change
the color, just use:
<FONT COLOR="#FFFFFF">
For size...
<FONT SIZE="3">
Size 3 is the standard size, but you can use
whatever you want. I'd be careful that it's not too small to read, or so
large that it's annoying.
To choose the actual font, use:
<FONT FACE="Verdana,
Arial, Times New Roman">
Here's another great thing. This tag tells
the browser to display Verdana--unless the viewer doesn't have Verdana on
their computer, in which case it will show Arial. Unless, of course, the
viewer doesn't have Arial, in which case it will resort to trusty old Times.
It's probably a good idea to have more than one choice available for your
browser when writing font tags, but it's not a necessity.
To put it all together...
<FONT FACE="Verdana,
Arial, Times New Roman"
COLOR="blue"
SIZE="4">Makes this!</FONT>
Makes
this!
Cool.
^ top
Headings
A few more
tags to learn--the heading tags. Lemme show ya:
<H1>Makes this</H1>
Makes this
A rather large... well... heading. They get smaller from
1:
H1
H2
H3
H4
H5
I've never found them to be too terribly useful, honestly,
but hey, you might, and besides, it made for a quick and painless lesson,
right?
^ top
Text Links
You cannot have a website without links, it
is against the laws of nature. Whether to allow your visitors to go to other
sites, or just to navigate your own, links are absolutely essential.
The tag to create a link is this:
<A HREF="http://www.wherever.com">
You can use this with either text or images,
but here, obviously, we're gonna go with text.
I think HREF stands for "Hypertext Reference", which is really silly,
but whatever it means, you have to remember it. Ok? Ok. The "hypertext
reference" you want is the URL to whatever page or website you're going to,
so that's what you'll want to put in quotes. Now...in order for the link to
actually work, which I assume is something you want, you'll need to add just
a little more.
The A stands for "anchor"...that
doesn't make any sense either, but it doesn't really matter. All you have to
know is that you have to add a closing tag for it, like so:
<A HREF="http://www.wherever.com">Click
Here!</A>
Now, when your visitors click on "Click Here!" they'll go to
www.wherever.com. Ain't that nice? You can put in any text you want,
obviously...
^ top
Lists
Sometimes, you just want
to list things. The creators of HTML, in their infinite (or at least "pretty
good") wisdom, provided a simple way for you to do that which makes perfect
sense. Sort of.
First things first. In the
HTML world, there are different kinds of lists: the first we will worry
about are Unordered
Lists and
Ordered Lists. Each kind
is full of List Items.
Unordered
Lists
work like so:
<UL>
<LI>Red</LI>
<LI>Blue</LI>
<LI>Yellow</LI>
</UL>
Which creates...
If you don't like the lovely little circle in front of
them, you can change it like so...
<UL type="square">
<LI>Red</LI>
<LI>Blue</LI>
<LI>Yellow</LI>
</UL>
Perhaps, however, you're feeling a little more ordered
than that. No problem. Ordered
Lists, at your service:
<OL>
<LI>Red</LI>
<LI>Blue</LI>
<LI>Yellow</LI>
</OL>
- Red
- Blue
- Yellow
You can change the look of Ordered Lists as well, by using
a, A,
i, and I. The
numbers before the List Items are the default, 1.
<OL type="i">
<LI>Red</LI>
<LI>Blue</LI>
<LI>Yellow</LI>
</OL>
- Red
- Blue
- Yellow
Now, if you want to be really thorough, you can put lists inside of
lists, like so:
<UL>
<LI>Red</LI>
<UL>
<LI>Crimson</LI>
<LI>Burgundy</LI>
<UL>
<LI>Light Burgundy</LI>
<LI>Dark Burgundy</LI>
</UL>
<LI>Vermilion</LI>
</UL>
<LI>Blue</LI>
<UL>
<LI>Azure</LI>
<LI>Indigo</LI>
<LI>Cobalt</LI>
</UL>
<LI>Yellow</LI>
<UL>
<LI>Blond</LI>
<LI>Lemon</LI>
<LI>Saffron</LI>
</UL>
</UL>
Which comes out like so:
- Red
- Crimson
- Burgundy
- Light Burgundy
- Dark Burgundy
- Vermilion
- Blue
- Yellow
More than three lists-inside-of-lists generally just confuse me, so I
suggest you don't try it.
Now, in the world of lists, there is yet another dragon we must slay (or,
if you're the non-violent type, capture and release into a nice, secluded
dragon refuge). The Definition
List.
Within the Definition
List are Definition
Titles and Definition
Data.
Put them together like so:
<DL>
<DT>Red</DT>
<DD>Red is a primary color. "Red" is also the word for "web" in Spanish. It
sounds the same as "read," but the two words have nothing to do with each
other, really. To be "in the red" is to be in debt, which...isn't
cool.</DD>
<DT>Blue</DT>
<DD>Blue is the hue of that portion of the visible spectrum lying between
green and indigo, evoked in the human observer by radiant energy with
wavelengths of approximately 420 to 490 nanometers. "To be blue" is to be
sad or depressed, as you probably will be when you realize how much time you
wasted reading this pointless little description.</DD>
<DT>Yellow</DT>
<DD>Yellow is yet another primary color, along with red and blue. It is also
the word us southerners use to describe the yolk of an egg. "I like boiled
eggs, but I don't like the yellow." If someone calls you yellow, be
insulted, because they probably mean you are cowardly. Or maybe just Asian,
which isn't a bad thing, but you can pretend you thought they meant
"cowardly" and beat them up anyway. Umm...yeah.</DD>
</DL>
It comes out looking lovely and organized:
- Red
- Red is a primary color. "Red" is also the word for "web" in Spanish. It sounds the same as "read," but the two words have nothing to do with each other, really. To be "in the red" is to be in debt,
which...isn't cool.
- Blue
- Blue is the hue of that portion of the visible spectrum lying between green and indigo, evoked in the human observer by radiant energy with wavelengths of approximately 420 to 490 nanometers. "To be blue" is to be sad or depressed, as you probably will be when you realize how much time you wasted reading this pointless little description.
- Yellow
- Yellow is yet another primary color, along with red and blue. It is also the word us southerners use to describe the yolk of an egg. "I like boiled eggs, but I don't like the yellow." If someone calls you yellow, be insulted, because they probably mean you are cowardly. Or maybe just Asian, which isn't a bad thing, but you can pretend you thought they meant "cowardly" and beat them up anyway. Umm...yeah.
That wasn't too painful, was it?^ top
Marquees
Mm, yes. Marquees. I almost forgot to mention
these, but I got a request, so here we go:
This effect can be easily overdone, but there are some
situations in which it can be useful. It's also as easy as falling off a
bridge.
<marquee>This is a marquee.</marquee>
Simple, no? Told you so. And it's just as easy to use it
with a picture, though I'm not entirely sure why you'd want to do so.
<marquee><img src="strange_eye.jpg"></marquee>
There is, of course, much more you can add...
Bgcolor: This controls the background
color of the marquee.
<marquee bgcolor="red">This is a marquee with a red background.</marquee>
This can very easily be overdone. Use sparingly.
Direction: This controls (duh) the directon of the text/picture.
LEFT, RIGHT, UP, or DOWN.
<marquee direction="up">Going
up...</marquee>
Behavior: SCROLL, SLIDE, or ALTERNATE. This controls
exactly what your marquee does.
<marquee behavior="alternate">Back
and forth, back and forth...yay!</marquee>
Scrollamount: This controls the speed. The higher the
number, the faster it'll go.
<marquee scrollamount="150">Speed
demon!</marquee>
There is also loop, which controls how many times the
text/picture will...well, loop, and the standard width and height
to control the size. Now, let's put it together, shall we?
<marquee bgcolor="blue" direction="down"
behavior="alternate" scrollamount="20" loop="1000"
height="300">Mega-Marquee!<img src="strange_eye.jpg">...<img
src="strange_eye2.jpg">...<img src="strange_eye3.jpg">...!!</marquee>
Never do this.
^ top
Back to HTML
tutorials
|
